import React, { useState } from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space } from "antd";
import "./index.less";

const DynamicForm = () => {
	const [form] = Form.useForm();
	const [, forceUpdate] = useState({});
	const onFinish = (values: any) => {
		console.log("Received values of form:", values);
	};

	return (
		<div className="card content-box">
			<Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}>
				<Form.Item
					name="username"
					rules={[{ required: true, message: 'Please input your username!' }]}
				>
					<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
				</Form.Item>
				<Form.Item
					name="password"
					rules={[{ required: true, message: 'Please input your password!' }]}
				>
					<Input
						prefix={<LockOutlined className="site-form-item-icon" />}
						type="password"
						placeholder="Password"
					/>
				</Form.Item>
				<Form.Item shouldUpdate>
					{() => (
						<Button
							type="primary"
							htmlType="submit"
							disabled={
								!form.isFieldsTouched(true) ||
								!!form.getFieldsError().filter(({ errors }) => errors.length).length
							}
						>
							Log in
						</Button>
					)}
				</Form.Item>
			</Form>


		</div>
	);
};

export default DynamicForm;
